vue h5 公众号支付

2024-07-10 00:59| 来源: 网络整理| 查看: 265

由于微信浏览器的限制无法从微信浏览器调起微信支付，需要对接公众号的支付

后端的小伙伴需要做一些微信公众号的配置（商户目录、域名）以及微信商户平台的配置

前端主要的是通过 code 获取 openid 来调起后端的接口拿到支付的参数来对接微信的sdk的方法

首先通过链接微信官方平台的链接来获取 code 微信开放文档

https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect

redirect_uri 是要跳转拿到code地址的链接由于本项目没有特别适合的地方来获取code 所以在首页进行获取

一、获取code created(){ var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { if(this.$store.state.user.smallOpenid) { } else if(!this.$route.query.code){ this.toWxPay() }else { this.$store.dispatch('user/getOpenId',window.location.href.split('?')[1].split('&')[0].split('=')[1]) } } else { // this.isweChat = '浏览器' console.log('浏览器打开的'); } methods: { toWxPay(){ window.location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa9f996fcd50636d4&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect` }, }

首先判断是否在微信浏览器环境下，如果是再去判断是否存在了vuex里若路由没有code 进行获取code 如果路由有code 调取vuex 把数据保存起来做一个持久化存储起来

import { getOpenId } from '@/api/home' export default ({ namespaced: true, state: { smallOpenid: '' }, mutations: { // 获取用户信息 editOpenId (state, newOpen) { state.smallOpenid = newOpen } }, actions: { async getOpenId (context, code) { try { const res = await getOpenId(code) console.log('getOpenId', res) context.commit('editOpenId', res.data.openid) // 保存数据 } catch (err) { console.log('getOpenId', err) } } }, modules: {} }) 二、支付

安装微信的sdk 概述 | 微信开放文档

npm install jweixin-module --save var wx = require('jweixin-module')

最严谨的话还是在当前要支付页面判断一下是什么环境

var ua = navigator.userAgent.toLowerCase() // eslint-disable-next-line eqeqeq if (ua.match(/MicroMessenger/i) == 'micromessenger') { this.isweChat = '微信' console.log('微信打开的') } else { this.isweChat = '浏览器' console.log('浏览器打开的') }

如果是微信的话需要先通过config进行注册在进行支付

if (this.isweChat === '微信') { console.log('走到支付了') wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: res.data.pay.appId, // 必填，公众号的唯一标识 timestamp: res.data.pay.timeStamp, // 必填，生成签名的时间戳 nonceStr: res.data.pay.nonceStr, // 必填，生成签名的随机串 signature: res.data.pay.paySign, // 必填，签名 jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表 }) wx.ready(function () { wx.chooseWXPay({ timestamp: res.data.pay.timeStamp, // 时间戳 nonceStr: res.data.pay.nonceStr, // 随机数 package: res.data.pay.package, // signType: res.data.pay.signType, paySign: res.data.pay.paySign, // 签名 success: function () { console.log('支付成功') // alert('支付成功') window.location.href = window.location.href + '&orderId=' + res.data.order_id }, cancel: function () { alert('支付取消') }, fail: function () { alert('支付失败') } }) })

【本文地址】

vue h5 公众号支付

vue h5 公众号支付

今日新闻

推荐新闻